<template>
	<el-container>
		<el-header :height="headerHeight" style="display:block">
			<el-row :gutter="20">
				<el-col :span="24">
					<el-form :inline="true" class="content-input-length" label-width="68px">
						<el-form-item label="角色名称">
							<el-input v-model="search.name" placeholder="角色名称" clearable/>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
							<el-button icon="el-icon-refresh" @click="searchReset"></el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<el-row :gutter="20" id="operation" v-auth="['role:add','role:batchDelete']" >
				<el-col :span="24">
					<el-button v-auth="['role:add']" type="primary" plain icon="el-icon-plus" size="small" @click="add">
						新增
					</el-button>
					<el-button v-auth="['role:batchDelete']" type="danger" plain icon="el-icon-delete" size="small"
							   :disabled="selection.length==0"
							   @click="batch_del">删除
					</el-button>
				</el-col>
			</el-row>
		</el-header>

		<el-main class="nopadding">
			<scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange"
					 :hideImport="!this.$TOOL.auth.verification(['role:import'])"
					 :importFun="data_import"
					 :hideExport="!this.$TOOL.auth.verification(['role:export'])"
					 :exportFun="batch_export"
					 remoteSort remoteFilter>
				<el-table-column type="selection" width="50" align="center"></el-table-column>
				<el-table-column label="角色ID" prop="roleId" width="180" align="center"></el-table-column>
				<el-table-column label="角色名称" prop="name" width="145" align="center"></el-table-column>
				<el-table-column label="关联账号数" width="145" align="center">
					<template #default="scope">
						{{ scope.row.bindAccountQuantity }}
					</template>
				</el-table-column>
				<el-table-column label="关联权限数" width="145" align="center">
					<template #default="scope">
						{{ scope.row.permissions.length }}
					</template>
				</el-table-column>
				<el-table-column label="描述/备注" prop="description" width="300" align="center"></el-table-column>
				<el-table-column label="创建时间" prop="createTime" width="160" align="center"></el-table-column>
				<el-table-column label="更新时间" prop="updateTime" width="160" align="center"></el-table-column>
				<el-table-column label="操作" fixed="right" align="center"
								 :width="this.$TOOL.auth.setTableOperationWidth(['role:update','role:delete'])"
								 v-if="this.$TOOL.auth.verification(['role:update','role:delete'])">
					<template #default="scope">
						<el-button v-auth="['role:update']" plain type="primary" size="small"
								   @click="table_edit(scope.row, scope.$index)">
							编辑
						</el-button>
						<el-button v-auth="['role:delete']" v-if="scope.row.bindAccountQuantity" plain type="danger"
								   size="small"
								   title="当前角色已关联其他账号，无法删除" disabled>删除
						</el-button>
						<el-button v-else plain type="danger" size="small" @click="table_del(scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>

	<save-dialog v-if="dialog.save" ref="saveDialog" @success="upsearch" @closed="dialog.save=false"></save-dialog>
	<import-dialog v-if="dialog.import" ref="importDialog" @success="upsearch"
				   @closed="dialog.import=false"></import-dialog>
</template>

<script>
import saveDialog from './save'
import importDialog from './import'

export default {
	name: 'role',
	components: {
		saveDialog,
		importDialog
	},
	data() {
		return {
			headerHeight: "45px",
			dialog: {
				save: false,
				import: false
			},
			apiObj: this.$API.system.role.list,
			selection: [],
			search: {
				roleId: "",
				name: ""
			},
			menuData: []
		}
	},
	watch: {},
	created() {
		window.onresize = () => {
			return (() => {
				// 监听浏览器宽高变化
				this.headerHeight = this.$TOOL.page.updateHeight();
			})()
		}
	},
	mounted() {
		// 菜单页面中 <el-header :height="headerHeight">...</el-header> 头部查询条件和新增编辑按钮区域高度
		this.headerHeight = this.$TOOL.page.updateHeight();
		this.getInitData();
	},
	methods: {

		/**
		 * 加载初始化数据
		 * @returns {Promise<void>}
		 */
		async getInitData() {
			let menuData = await this.$API.system.role.getMenuList.get();
			this.menuData = menuData.data
		},

		/**
		 * 搜索
		 */
		async upsearch() {
			this.$refs.table.upData(this.search)
		},

		/**
		 * 搜索条件重置
		 */
		async searchReset() {
			this.search = {
				roleId: "",
				name: ""
			};
			this.upsearch();
		},

		/**
		 * 导入
		 */
		async data_import() {
			this.dialog.import = true
			this.$nextTick(() => {
				this.$refs.importDialog.open("import")
			})
		},

		/**
		 * 添加
		 */
		async add() {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open().initMenu(this.menuData)
			})
		},

		/**
		 * 编辑
		 * @param row
		 */
		async table_edit(row) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('edit').initMenu(this.menuData).setData(row)
			})
		},

		/**
		 * 删除
		 * @param row
		 * @param index
		 * @returns {Promise<void>}
		 */
		async table_del(row) {
			let reqData = {roleId: row.roleId}
			this.$confirm(`确定删除 ${row.name} 角色吗？`, '提示', {
				type: 'warning'
			}).then(async () => {
				const loading = this.$loading();
				let res = await this.$API.system.role.del.delete(reqData);
				if (res.status == 200) {
					this.upsearch()
					this.$message.success("删除成功")
				}
				loading.close();
			}).catch(() => {

			})
		},

		/**
		 * 批量删除
		 * @returns {Promise<void>}
		 */
		async batch_del() {
			this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
				type: 'warning'
			}).then(async () => {
				const loading = this.$loading();
				let ids = [];
				for (let item of this.selection) {
					ids.push(item.roleId);
				}
				let reqData = {roleIdMany: ids.toString()}
				let res = await this.$API.system.role.delBatch.delete(reqData);
				if (res.status == 200) {
					this.upsearch()
					this.$message.success("删除成功")
				}
				loading.close();
			}).catch(() => {

			})
		},

		/**
		 * 批量导出
		 * @returns {Promise<void>}
		 */
		async batch_export() {
			let res = await this.$API.system.role.exportList.get(this.search);
			if (res.status == 200) {
				this.$message.success("系统数据生成中...")
			}
		},

		/**
		 * 表格行选择后回调事件
		 * @param selection
		 */
		async selectionChange(selection) {
			this.selection = selection;
		}

	}
}
</script>

<style>
</style>
